<template>
  <div class="cart container">
    <header>
      <i @click="goBack" class="iconfont icon-fanhui"></i>
      <span>购物车</span>
      <span @click="isNavBar" v-text="isNavStatus ? '完成' : '编辑'"></span>
    </header>
    <section v-if="list.length">
      <div class="cart-title">
        <van-checkbox @click="checkAllFn" :value="isCheckedAll"></van-checkbox>
        <span>商品</span>
      </div>
      <ul >
        <li v-for="(item,index) in list" :key="index">
          <div class="check">
            <van-checkbox @click="CHECK_ITEM(index)" v-model="item.checked"></van-checkbox>
          </div>
          <h2>
            <img :src="item.goods_imgUrl" alt="" />
          </h2>
          <div class="goods">
            <div class="goods-title">
              <span>{{item.goods_name}}</span>
              <i class="iconfont icon-shanchu" @click="delGoodsFn(item.id)"></i>
            </div>
            <div class="goods-price">￥{{item.goods_price}}</div>
            <van-stepper @change="changeNum($event,item)" v-model="item.goods_num" integer/>
          </div>
        </li>
      </ul>
    </section>
    <section v-else>
      <van-empty description="暂无数据，请添加商品" />
      <button ><router-link to="/home">首页</router-link></button>
    </section>
    <footer v-if="list.length">
      <div class="radio">
        <van-checkbox @click="checkAllFn" :value="isCheckedAll"></van-checkbox>
      </div>
      <div class="total" v-show="!isNavStatus">
        <div>共有 <span>{{total.num}}</span> 件商品</div>
        <div>
          <span>总计：</span>
          <span class="total-active">￥{{total.price.toFixed(2)}} + 0茶币</span>
        </div>
      </div>
      <div class="order" v-if="!isNavStatus" @click="goOrder">去结算</div>
      <div class="order" @click="delGoodsFn" v-else>删除</div>
    </footer>
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/components/home/Header.vue";
import http from '@/common/api/request';
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';
import { Toast } from 'vant';
export default {
  name: "Cart",
  data() {
    return {
      isNavStatus:false,
      checked: true,
    };
  },
  components: {
    Tabbar,
    Header,
  },
  computed:{
    ...mapState({
      list:state=>state.cart.list,
      selectList:state=>state.cart.selectList
    }),
    ...mapGetters(['isCheckedAll','total']),
    goodsList(){
      return this.selectList.map(id=>{
          return this.list.find(v=>v.id ==id);
      })
    }
  },
  created(){
    this.getData();
  },
  methods: {
    ...mapMutations(['CART_LIST','CHECK_ITEM','initOrder']),
    ...mapActions(['checkAllFn','delGoodsFn']),
    async getData(){
      let res = await http.$axios({
        url:'/api/selectCart',
        method:"post",
        headers:{
          token:true
        },
      })

      res.data.forEach(v=>{
        v['checked'] = true;
      })
      this.CART_LIST(res.data);
    },
    //点击编辑按钮
    isNavBar(){
      this.isNavStatus = ! this.isNavStatus
    },
    //修改数量
    changeNum(value,item){
      //当前购物车的id以及 num==》传递给后端
      http.$axios({
        url:'/api/updateNum',
        method:"post",
        headers:{
          token:true
        },
        data:{
          id:item.id,
          num:value
        }
      }).then(res=>{
        console.log(res);
      })
      
    },
    //去结算
    goOrder(){
      if (!this.selectList.length) {
        Toast('请至少选择一件商品')
        return;
      }

      let newList = [];
      this.list.forEach(item=>{
        this.selectList.filter(v=>{
          if(v == item.id){
            newList.push(item);
          }
        })
      })
      //生成一个订单
      http.$axios({
          url:'/api/addOrder',
          method:"post",
          headers:{
              token:true
          },
          data:{
            arr:newList
          }
      }).then(res=>{
        if(!res.success) return;
        //存储订单号 vuex
        this.initOrder(res.data);
        //进入提交页面
        this.$router.push({
          path:'/order',
          query:{
            id:JSON.stringify(this.selectList),
            goodsList:JSON.stringify(this.goodsList)
          }
        });
      })

    },
    //返回上一页
    goBack() {
      this.$router.replace({
        path:'/home',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
  width: 100%;
  height: 1.2571rem;
  color: #fff;
  background-color: #b0352f;
  box-sizing: border-box;
  i {
    font-size: 0.5333rem;
  }
  span {
    font-size: 0.4267rem;
  }
}
section {
  background-color: #f5f5f5;
  .cart-title {
    display: flex;
    padding: 0.5333rem;
    span {
      padding: 0 0.4rem;
      font-size: 0.48rem;
      font-weight: 700;
    }
  }
  ul {
    display: flex;
    flex-direction: column;
    li {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      margin: .2133rem 0;
      padding: 0.16rem 0.5333rem;
      background-color: #fff;
      .check{
        padding-right: 0 .2667rem;
      }
      h2{
        padding-left:.375rem;
      }
      .goods{
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: .4rem;
        font-size: .32rem;
        .goods-title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            i{
                font-size: .48rem;
            }
        }
        .goods-price{
            padding: .08rem 0;
            color: #b0352f;
        }
        ::v-deep .van-stepper{
            text-align: right;
        }
      }
      img {
        padding: 0 .1333rem;
        width: 1.9733rem;
        height: 1.9733rem;
      }
    }
  }
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.28rem;
  border-top: 0.0267rem solid #ccc;
  .radio {
    padding: 0 0.2667rem;
  }
  .total {
    flex: 1;
    font-size: 0.32rem;
    .total-active {
      color: #b0352f;
    }
  }
  .order {
    width: 3.2rem;
    line-height: 1.28rem;
    text-align: center;
    font-size: 0.4267rem;
    color: #fff;
    background-color: #b0352f;
  }
}
</style>
